<script setup lang="ts">
import { Refresh } from "@element-plus/icons-vue";
import {
useStatisticYearReport,
useStatisticYearReportExport,
} from "@fl/api/elevator-api";
import { SubmitBtn } from "@fl/components";
import dayjs from "dayjs";
import { cloneDeep } from "lodash-es";
import type { VxeGridProps } from "vxe-table";
function disabledDate(time) {
    return dayjs(time).isAfter(dayjs(new Date()).format("YYYY-MM-DD"));
}
const gridOptions4 = reactive<VxeGridProps>({
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: "areaName", title: "区" },
        { field: "quotaNum", title: "年度加装电梯目标(台)", sortable: true },
        { field: "yesTotalNum", title: "截至昨日累计通过联合审查数(台)", sortable: true },
        {
            field: "todayNewNum",
            title: "今日新增累计通过联合审查数(台)",
            sortable: true,
        },
        { field: "todayTotalNum", title: "截至今日累计通过联合审查数(台)", sortable: true },
        { field: "finishRate", title: "目标完成率(%)", sortable: true },
    ],
    data: [],
    footerData: [],
    showFooter: true,
    showOverflow: true,
});
const yearReportParams = ref({
    filterTime: dayjs().format('YYYY-MM-DD'),
});
const filterTime = ref(dayjs().format('YYYY-MM-DD'));
const {
    data: yearReportData,
    isLoading: yearReportLoading,
    refetch: yearReportRefetch,
} = useStatisticYearReport(yearReportParams); //各区（街道）安装进度
const {
    isPending: exporYearReportPending,
    mutateAsync: exporYearReportMutate,
} = useStatisticYearReportExport(yearReportParams);
async function exporYearReport() {
    const res = await exporYearReportMutate();
    if (res) {
        const objectUrl = URL.createObjectURL(res);
        location.href = objectUrl;
        URL.revokeObjectURL(objectUrl);
    }
}
watchEffect(() => {
    if (yearReportData.value) {
        gridOptions4.data = cloneDeep(yearReportData.value.slice(0, -1));
        gridOptions4.footerData = cloneDeep(yearReportData.value.slice(-1));
    }
});
function resetfilterTime() {
    filterTime.value = dayjs().format('YYYY-MM-DD');
    yearReportParams.value = {
        filterTime: dayjs().format('YYYY-MM-DD'),
    };
}
function submitYearReport() {
    yearReportParams.value = {
        filterTime: filterTime.value,
    };
}
</script>
<template>
    <ElCard shadow="hover">
        <div class="font-550 mb20 text-18 flex items-center justify-between">
            <div class="flex items-center">
                年度目标完成情况
                <div class="filter-box ml-10 flex items-center">
                    <el-date-picker
                        style="margin-right: 10px"
                        v-model="filterTime"
                        type="date"
                        placeholder="请选择时间"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        size="small"
                        :disabled-date="disabledDate"
                    />

                    <SubmitBtn
                        @click="resetfilterTime"
                        :isLoading="yearReportLoading"
                        type="default"
                        >重置</SubmitBtn
                    >
                    <SubmitBtn
                        @click="submitYearReport"
                        :isLoading="yearReportLoading"
                        type="primary"
                        >搜索</SubmitBtn
                    >
                </div>
            </div>
            <div class="flex items-center">
                <div
                    class="color-[#235FC4] flex items-center font-400 mr20 cursor-pointer"
                >
                    <el-button
                        :icon="Refresh"
                        :loading="yearReportLoading"
                        @click="yearReportRefetch"
                        >刷新</el-button
                    >
                </div>
                <SubmitBtn
                    @click="exporYearReport"
                    :isLoading="exporYearReportPending"
                    type="primary"
                    >导出</SubmitBtn
                >
            </div>
        </div>
        <vxe-grid
            ref="xGrid"
            v-bind="gridOptions4"
            align="center"
            class="mb12"
            :loading="yearReportLoading"
        >
        </vxe-grid>
    </ElCard>
</template>
